<template>
  <el-row class="h100">
    <el-col class="h100" :span="12">
      <div class="h100" ref="echartsMapRef"></div>
    </el-col>
    <el-col class="h100" :span="12">
      <div class="h100" ref="echartsMapRef1"></div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const echartsMapRef = ref();
const echartsMapRef1 = ref();

const initChart = (dom: HTMLElement, title: string) => {
  const XData = ['100', '300', '500', '700', '900'];
  const chart = echarts.init(dom);

  const option = {
    title: {
      text: title,
      left: 'center',
      bottom: 0,
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: 20,
      right: 20,
      top: 40,
      bottom: 50,
      containLabel: true,
    },
    legend: {},
    xAxis: {
      type: 'category',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: XData,
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: 'IDW',
        barMaxWidth: 10,
        data: [220, 200, 180, 170],
        type: 'line',
      },
      {
        name: 'OK',
        barMaxWidth: 10,
        data: [170, 160, 130, 120],
        type: 'line',
      },
      {
        name: 'GGS',
        barMaxWidth: 10,
        data: [100, 60, 50, 40],
        type: 'line',
      },
    ],
  };
  chart.setOption(option);
};

onMounted(() => {
  initChart(echartsMapRef.value, '平均绝对误差值');
  initChart(echartsMapRef1.value, '平均绝对误差标准偏差');
});
</script>

<style lang="scss" scoped></style>
